import React from 'react';
import { WhiteSpace } from 'antd-mobile';
import moment from 'moment';
import _ from 'lodash';
import MyIcon from '../../components/Base/MyIcon';
import styles from './VipListShow.less';

class VipListShow extends React.Component {

  getVipType = (type) => {
    switch (type) {
      case 'A':
        return '核心会员';
      case 'B':
        return '忠诚会员';
      case 'C':
        return '普通会员';
      case 'D':
        return '低效会员';
      case 'E':
        return '流失会员';
      case 'F':
        return '新注册会员';
    }
  };

  getAge = (birthday) => {
    const months = moment().diff(moment(birthday), 'months');
    const years = Math.floor(months / 12);
    if (months >= 0) {
      return years > 0 ? `${years}岁${months % 12}个月` : `${months % 12}个月`;
    }
    return `预产期前${Math.abs(months % 12)}个月`;
  };

  vipColor = (type) => {
    switch (type) {
      case 'A':
        return styles.hx;
      case 'B':
        return styles.zc;
      case 'C':
        return styles.pt;
      case 'D':
        return styles.dx;
      case 'E':
        return styles.dx;
      case 'F':
        return styles.pt;
    }
  };

  vipImg = (type) => {
    switch (type) {
      case 'A':
        return require("../../assets/vipA.png");
      case 'B':
        return require("../../assets/vipB.png");
      case 'C':
        return require("../../assets/vipC.png");
      case 'D':
        return require("../../assets/vipD.png");
      case 'E':
        return require("../../assets/vipD.png");
      case 'F':
        return require("../../assets/vipC.png");
    }
  };

  render() {
    const rowData = this.props.rowData;

    return (

      <div
        key={rowData._id}
        className={styles.section1}
        onClick={this.props.click}
      >

        <div className={styles.left}>
          <img
            src={rowData.vip_sex == "男" ? require("../../assets/manVip.png") : require("../../assets/girlVip.png")}
            className={styles.img} alt=""
          />
          <div className={styles.vipName}>
            {rowData.vip_name}
          </div>
          <div className={styles.vipId}>
            ID:{rowData.card_id}
          </div>
          <div className={this.vipColor(rowData.vip_level)}>
            <img className={styles.vipImg} src={this.vipImg(rowData.vip_level)} alt="" />
            {this.getVipType(rowData.vip_level)}
          </div>
        </div>

        <div className={styles.right}>
          <div className={styles.firstLine}>
            <span className={styles.rightLeft}><span
              className={styles.gray}
            >月龄：</span>{rowData.birthday ? this.getAge(rowData.birthday) : ' '}</span>
            <span><span
              className={styles.gray}
            >出生日期：</span> {rowData.birthday ? String(rowData.birthday).slice(0, 10) : ' '}</span>
          </div>
          <div className={styles.secondLine}>
            <span className={styles.rightLeft}><span className={styles.gray}>性别：</span>{rowData.vip_sex || ' '}</span>
            <span><span className={styles.gray}>手机号：</span>{rowData.mobile || rowData.vip_tel || ' '}</span>
          </div>
          {/* <div className={styles.remark}>
            {rowData.remarks && <span><span className={styles.gray}>备注:</span>
            <span className={styles.remarkName}>{rowData.remarks}</span></span>}

            {
              this.props.onRemarksClick
              &&
              <span className={styles.addRemark} onClick={this.props.onRemarksClick}>
              <MyIcon
              type="edit" color="rgb(16,117,35)" size="xxs"
              style={{ position: 'relative', bottom: 2, marginRight:8 }}
              />
              <span style={{verticalAlign:"top"}}>修改备注</span>
              </span>
            }

          </div>*/}
          {/* <div className={styles.remark}>
            <div className={styles.left}>
              {rowData.remarks && <span><span className={styles.gray}>备注:</span>
            <span className={styles.remarkName}>{rowData.remarks}</span></span>}
            </div>

            <div>
              {
                this.props.onRemarksClick
                &&
                <span className={styles.addRemark} onClick={this.props.onRemarksClick}>
              <MyIcon
                type="edit" color="rgb(16,117,35)" size="xxs"
                style={{ position: 'relative', bottom: 2, marginRight:8 }}
              />
              <span style={{verticalAlign:"top"}}>修改备注</span>
              </span>
              }
            </div>
          </div>*/}

          <div className={styles.label2}>
            <div className={styles.left}>
              {rowData.vip_tags && <span><span className={styles.gray}>标签:</span>
                <span className={styles.labelName}>
                  {
                    rowData.vip_tags &&
                    rowData.vip_tags.map(item => `${item.text} `)
                  }
                  {/* 把以前的备注合并入标签*/}
                  {rowData.remarks}
                </span></span>}
            </div>

            <div>
              {
                this.props.onLabelClick
                &&
                <span className={styles.addLabel} onClick={this.props.onLabelClick}>
                  <MyIcon
                    type="edit" color="rgb(16,117,35)" size="xxs"
                    style={{ position: 'relative', bottom: 2, marginRight: 8 }}
                  />
                  <span style={{ verticalAlign: "top" }}>修改标签</span>
                </span>
              }
            </div>
          </div>
        </div>

        <WhiteSpace className={styles.space} />

      </div>
    );
  }
}

export default VipListShow;

